<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin//style/font-awesome/css/font-awesome.min.css">
    <style>
        .layui-form-select dl {
            max-height: 150px;
        }

        .layui-card {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, .05);
            margin-bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab" lay-filter="component-tabs-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">模块设置</li>
                    <li style="display:none;">功能设置</li>
                    <li style="display:none;">权限分配</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form" id="popup-from" style="padding: 20px 30px 0 0;">
                            <input type="text" name="cId" value="" style="display: none;" />
                            <div class="layui-form-item layui-row layui-col-space15">
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">菜单名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="cTitle" lay-verify="required" placeholder="请输入菜单名称"
                                               autocomplete="new-password" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">编号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="cCode" placeholder="请输入编号" autocomplete="new-password"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">上级</label>
                                    <div class="layui-input-block" id="parentId">
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">图标</label>
                                    <div class="layui-input-inline" style="max-width: 30px; padding-top: 5px;" id="iconShow">

                                    </div>
                                    <div class="layui-input-inline" style="width:calc(100% - 160px);margin-right:auto;float:right">
                                        <input type="text" name="cIcon" lay-verify="required"
                                               autocomplete="new-password" placeholder="请双击选择图标" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">目标</label>
                                    <div class="layui-input-block">
                                        <select name="cIsMenu">
                                            <option value="1">iframe</option>
                                            <option value="0">expand</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">排序</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="cSortCode" lay-verify="required|number"
                                               autocomplete="new-password" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <label class="layui-form-label">地址</label>
                                    <div class="layui-input-inline" style="width: calc(100% - 240px)">
                                        <div id="cPath"></div>
                                    </div>
                                    <div class="layui-input-inline" style="width: 110px; margin-right: auto; float: right ">
                                        <button class="layui-btn" id="cus_path" type="button">自定义路径 </button>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">选项</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="cEnabled" title="是否有效" checked>
                                        <input type="checkbox" name="cIsOpen" title="是否展开">
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <label class="layui-form-label">功能按钮</label>
                                    <div class="layui-input-block" id="func">
                                        <input type="checkbox" value="x-add" title="新增">
                                        <input type="checkbox" value="x-edit" title="编辑">
                                        <input type="checkbox" value="x-delete" title="删除">
                                        <input type="checkbox" value="x-batch-delete" title="批量删除">
                                    </div>
                                </div>

                                <div class="layui-col-xs12">
                                    <label class="layui-form-label">描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="cDescription" placeholder="请输入内容"
                                                  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-layout-admin layui-hide">
                                    <div class="layui-input-block">
                                        <div class="layui-footer" style="left: 0; text-align: right">
                                            <button class="layui-btn" lay-filter="form-submit" id="form-submit"
                                                    type="button" lay-submit>
                                                立即提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <table id="modulebutton-manage" lay-filter="modulebutton-manage"></table>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class=" layui-col-xs4">
                                <div class="layui-card">
                                    <table class="layui-table" id="role_list-init" lay-filter="role_list-filter">
                                    </table>
                                </div>
                            </div>
                            <div class="layui-col-xs8">
                                <div class="layui-card layui-form" lay-filter="component-form-element">
                                    <div class="layui-card-body layui-row">
                                        <div class="layui-col-md12">
                                            <!--style="pointer-events:none"-->
                                            <label style="margin-right:30px ;">菜单名称</label> <input type="checkbox"
                                                                                                   name="c_module" title="菜单功能1" checked>
                                        </div>
                                        <div class="layui-col-md12" style="margin-top: 10px">
                                            <label style="margin-bottom: 10px;">功能名称</label>
                                            <div id="c_func" style="display: inline;margin-left: 30px; ">
                                                <input type="checkbox" lay-filter="switchTest" value=" " title="新增" />
                                                <input type="checkbox" lay-filter="switchTest" value=" " title="编辑" />
                                                <input type="checkbox" lay-filter="switchTest" value=" " title="删除" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script src="../../layuiAdmin/lib/extend/xm-select.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form'], function () {
            var $ = layui.$,
                form = layui.form,
                table = layui.table,
                element = layui.element,
                admin = layui.admin,
                util = layui.util;
            var id = $.getParam("id");
            var title = $.getParam("title");
            var type = 0;
            element.render();
            var roleIds = [];

            element.on('tab(component-tabs-brief)', function (obj) {
                type = obj.index;
                if (id != "") $("#func").parent().hide();
                if (type == 1) {
                    //菜单按钮管理
                    table.render({
                        elem: '#modulebutton-manage',
                        toolbar: '<div><button class= "layui-btn layui-btn-sm" lay-event="add">新增</button></div> ',
                        defaultToolbar: [],
                        url: '/api/Module/GetModuleButtonPageList',
                        cols: [
                            [
                                { field: 'number', title: '序号', width: 70, align: 'center', type: 'numbers' },
                                { field: 'cTitle', title: '按钮名称', minWidth: 100 },
                                { field: 'cEnCode', title: '编号', minWidth: 100 },
                                { field: 'cSortCode', title: '排序', width: 80 },
                                { field: 'cApi', title: 'api', width: 250 },
                                {
                                    field: 'cEnabled',
                                    width: 100,
                                    title: '是否启用',
                                    align: 'center',
                                    templet: function (d) {
                                        if (d.cEnabled) return '<button class="layui-btn layui-btn-xs">已启用</button>'
                                        else return '<button class="layui-btn layui-btn-primary layui-btn-xs">已禁用</button>'
                                    }
                                },
                                {
                                    title: '操作', width: 150, align: 'center', fixed: 'right', templet: function (r) {
                                        return `<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>`;
                                    }
                                }
                            ]
                        ],
                        page: true,
                        where: { queryJson: JSON.stringify({ moduleId: id }) },
                        limit: 10,
                        height: '400px',
                        text: '对不起，加载出现异常！'
                    });
                    var editModulebutton = function (buttonid) {
                        parent.layer.open({
                            type: 2,
                            title: '编辑菜单按钮',
                            content: 'modulebuttonform.html?id=' + buttonid + "&title=" + title + "&moduleId=" + id,
                            maxmin: false,
                            area: ['740px', '470px'],
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                var that = this.yes.arguments[1];
                                that.find('a.layui-layer-btn0').css("pointer-events", "none");
                                setTimeout(() => {
                                    that.find('a.layui-layer-btn0').css("pointer-events", "")
                                }, 2000)
                                layero.find('iframe').contents().find('#form-submit').trigger('click');
                            }
                        });
                    }
                    var delModulebutton = function (ids) {
                        layer.confirm('确定删除吗？', function (index) {
                            admin.req({
                                type: 'post',
                                url: '/api/module/DelModuleButton',
                                data: { ids: ids.join(','), },
                                success: function (data) {
                                    if (data.code == 200) {
                                        table.reload('modulebutton-manage');
                                        layer.close(index);
                                        layer.msg('已删除!', { icon: 1, time: 1000 });
                                    } else {
                                        layer.close(index);
                                        layer.msg(data.msg, { icon: 2, time: 1000 });
                                    }
                                }
                            });
                        });
                    }
                    //监听工具条
                    table.on('tool(modulebutton-manage)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'del') {
                            delModulebutton([data.cId]);;
                        } else if (obj.event === 'edit') {
                            var tr = $(obj.tr);
                            editModulebutton(obj.data.cId);
                        }
                    });
                    //监听工具条
                    table.on('toolbar(modulebutton-manage)', function (obj) {
                        if (obj.event === 'add') {
                            editModulebutton();
                        }
                    });
                } else if (type == 2) {
                    $('input[type="checkbox"][name="c_module"]').attr('title', $("input[name='cTitle']").val());
                    form.render();
                    form.on('checkbox(switchTest)', function (data) {
                        $('input[name="c_module"]').prop('checked', true);
                        form.render();
                    });
                    form.on('checkbox(switchTest0)', function (data) {
                        $('input[name="modulebutton"]').prop('checked', false);
                        form.render();
                    });
                    // 创建渲染实例
                    table.render({
                        elem: '#role_list-init',
                        url: '/api/Role/GetRolePageList?pageIndex=1&pageSize=1000',
                        page: false,
                        height: '403px',
                        cols: [[
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'cName', minWidth: 100, title: '角色名称' }
                        ]]
                    });
                    table.on('checkbox(role_list-filter)', function (obj) {
                        if (obj.type == "one") {
                            if (obj.checked) {
                                roleIds.push(obj.data.cId);
                            } else {
                                // 取消选中时，从数组中删除对应的数据
                                roleIds = roleIds.filter((item) => item !== obj.data.cId);
                            }
                        } else if (obj.type == "all") {
                            var data = table.getData('role_list-init');
                            if (obj.checked) {
                                roleIds = data.map(t => t.cId);
                            } else {
                                roleIds = [];
                            }
                        }
                        if (roleIds.length !== 0) {
                            getRoleModules(roleIds.join(','));
                        }
                    });
                }
            });
            var getRoleModules = function (roleIds) {
                admin.req({
                    type: 'get',
                    url: "/api/Module/GetRoleModules?moduleId=" + id + "&roleIds=" + roleIds,
                    success: function (r) {
                        if (r.code == 200) {
                            if (r.data.hasModule) {
                                $('input[name="c_module"]').prop('checked', true);
                                $('input[name="modulebutton"]').prop('checked', false).filter(function () {
                                    return r.data.hasButtons.includes($(this).val());
                                }).prop('checked', true);
                            } else {
                                $('input[name="modulebutton"]').prop('checked', false);
                                $('input[name="c_module"]').prop('checked', false);
                            }
                            form.render();
                        }
                    }
                });
            }

            var getModuleButtons = function () {
                admin.req({
                    url: '/api/Module/GetModuleButtonPageList?pageIndex=1&pageSize=30',
                    data: { queryJson: JSON.stringify({ moduleId: id }) },
                    success: function (res) {
                        var html = [];
                        layui.each(res.entitys, function (index, item) {
                            html.push(' <input type="checkbox" lay-filter="switchTest" name="modulebutton" value="' + item.cId + '" title="' + item.cTitle + '" />');
                        });
                        if (res.entitys.length > 0) $("input[name='c_module']").value = res.entitys[0].cModuleName;
                        $("#c_func").html(html.join(''));
                        form.render();
                    }
                });
            }

            var xmParentId = xmSelect.render({
                el: '#parentId',
                name: 'cParentId',
                tips: '请选择父级菜单',
                model: { label: { type: 'text' } },
                radio: true,
                clickClose: true,
                tree: {
                    show: true,
                    strict: false,
                    expandedKeys: [],
                },
                height: 'auto',
                data() {
                    var data = null;
                    admin.req({
                        type: 'get',
                        async: false,
                        url: '/api/Module/GetParentIdModule',
                        success: function (r) {
                            if (r.code == 200) {
                                data = r.data;
                            }
                        }
                    });
                    return data;
                }
            })

            var xmPaths = xmSelect.render({
                el: '#cPath',
                name: 'cPath',
                tips: '请选择页面路径',
                model: { label: { type: 'text' } },
                radio: true,
                clickClose: true,
                direction: 'down',
                tree: {
                    show: true,  //是否显示树状结构
                    showFolderIcon: true, //是否展示三角图标
                    showLine: true, //是否显示虚线
                    indent: 20, //间距
                    strict: false, //是否严格遵守父子模式
                    clickCheck: true,//点击节点是否选中
                },
                height: '150px',
                filterable: true,
                data() {
                    var data = null;
                    admin.req({
                        type: 'get',
                        async: false,
                        url: '/api/Module/GetPageDir',
                        success: function (r) {
                            if (r.code == 200) {
                                data = r.data;
                            }
                        }
                    });
                    return data;
                }
            });

            $("input[name='cIcon']").on('dblclick', function () {
                parent.layer.open({
                    type: 2,
                    title: '图标',
                    area: ['800px', '500px'], //宽高
                    content: '../home/icon1.html',
                    success: function (layero, index) {
                        var li = layero.find('iframe').contents().find('li');
                        li.on('dblclick', function () {
                            let icon_text = $(this).find('.doc-icon-fontclass').text();
                            $("input[name='cIcon']").val(icon_text);
                            parent.layer.close(index);
                            $("#iconShow").html('<i class="layui-icon ' + icon_text + '" style="font-size:30px"></i>');
                        })
                        var a = layero.find('iframe').contents().find('#icons a');
                        a.on('dblclick', function () {
                            let icon_text = $(this).find('i').attr("class").replace("fa ", "");
                            $("input[name='cIcon']").val(icon_text);
                            $("#iconShow").html(' <i class="fa ' + icon_text + ' fa-fw fa-2x" aria-hidden="true"></i>');
                            parent.layer.close(index);
                        })
                    }
                });
            });

            $("#cus_path").click(function () {
                layer.prompt({ title: '自定义页面地址', formType: 2, area: ['520px', '25px'] }, function (text, index) {
                    layer.close(index);
                    xmPaths.setValue([{ name: text, value: text }]);
                });
            })

            //获取表单值
            if (id != "") {
                if (id != "") $("#func").parent().hide();
                admin.req({
                    type: 'get',
                    url: "/api/Module/GetModuleById?id=" + id,
                    success: function (r) {
                        if (r.code == 200) {
                            $("#popup-from").SetFormData(r.data);
                            xmParentId.setValue([r.data.cParentId]);
                            xmPaths.setValue([{ name: r.data.cPath, value: r.data.cPath }])
                            form.render();
                            if (r.data.cIsMenu == 1) {
                                getModuleButtons();
                                $(".layui-tab-title>li").show();
                            }
                            if (r.data.cIcon.indexOf("fa") == 0) {
                                $("#iconShow").html(' <i class="fa ' + r.data.cIcon + ' fa-fw fa-2x" aria-hidden="true"></i>');
                            } else {
                                $("#iconShow").html('<i class="layui-icon ' + r.data.cIcon + '" style="font-size:30px"></i>');
                            }
                        }
                    }
                });
            }
            //保存表单
            form.on('submit(form-submit)', function (data) {
                if (type == 0) {
                    var field = data.field; //获取提交的字段
                    if (id == "" && field.cIsMenu == 1) {
                        var buttons = [];
                        $("#func").find('input[type="checkbox"]:checked').each(function (index, item) {
                            buttons.push(item.value);
                        })
                        field.buttons = buttons;
                    }
                    field.cEnabled = field.cEnabled == "on" ? true : false;
                    if (field.cParentId == "") field.cParentId = 0;
                    //提交
                    admin.req({
                        type: 'post',
                        url: "/api/module/EditModule",
                        data: field,
                        success: function (data) {
                            if (data.code == 200) {
                                parent.layer.msg('操作成功!', { icon: 1, time: 1000 });
                                id = data.data.cId;
                                title = field.cTitle;
                                if (data.data.cIsMenu == 1) {
                                    getModuleButtons();
                                    $(".layui-tab-title>li").show();
                                }
                                //layer.close(index); //关闭弹层
                                table.reload('modulebutton-manage'); //数据刷新
                                parent.layui.table.reload('module-manage');
                            } else {
                                layer.msg('操作失败!\n' + data.msg, { icon: 2, time: 1000 });
                            }
                        }
                    });
                } else if (type == 2) {
                    var buttonIds = [];
                    $('input[name="modulebutton"]:checked').each(function () {
                        buttonIds.push($(this).val());
                    });
                    if (roleIds.length == 0) {
                        return;
                    }
                    var hasModule = $('input[name="c_module"]').prop('checked');
                    admin.req({
                        type: 'post',
                        data: { moduleId: id, roleIds, hasModule, buttonIds },
                        url: "/api/Module/ButtonsRoleAuth",
                        success: function (r) {
                            if (r.code == 200) {
                                parent.layer.msg('操作成功!', { icon: 1, time: 1000 });
                            }
                        }
                    });
                }
            });
        })
    </script>
</body>

</html>